import React from 'react'
import { useState } from 'react';

export default function UseStateCom() {
  console.log('run run run');
  //声明一个状态    useState 调用时接收一个参数, 就是『状态的初始值』   
  let [count, setCount] = useState(0);
  let [count2, setCount2] = useState(100);
  //声明一个函数
  let add = () => {
    //更新状态  当 setXX 更新状态之后, 会再次执行组件函数, 然后重新渲染组件
    setCount(count + 1);
  }
  //减法
  let sub = () => {
    //更新
    // setCount(count => {
    //   //通过函数的返回值, 更新状态的值
    //   return count - 1;
    // })
    //简写
    setCount(count => count - 1);
  }
  //保持不变  如果更新时, 新值与旧值一致, 则组件函数不会再次执行
  let keep = () => {
    setCount(count);
  }
  //together
  let together = () => {
    //更新多个状态, 内部会进行合并更新.
    setCount(count + 1);
    setCount2(count2 + 1);
  }
  return (
    <div>
      <h2>{count}</h2>
      <hr />
      <button onClick={add}>自增</button>
      <button onClick={sub}>自减</button>
      <button onClick={keep}>保持不变</button>
      <hr />
      <h2>{count2}</h2>
      <button onClick={together}>一起改变</button>
    </div>
  )
}
